<template>
    <div style="overflow:hidden;">
        <IndexTop></IndexTop>
        <IndexHeader></IndexHeader>
        <div style="height: 300px">
            <img style="width: 100%;height: 100%" src="../assets/img/aboutimg.jpg" alt="">
        </div>
        <br>
        <br>
        <div class="animated fadeInRight"
             style="width: 1200px;margin: 0 auto;text-align: center;border-bottom: 1px solid #EBEBEB">
            <span style="font-size: 30px">   关于我们</span>
            <span style="margin-left: 10px;color:#4AB344;font-size: 18px">ABOUT</span>&nbsp;
            <span style="margin-right: 20px;color: #A9A9A9;font-size: 18px">US</span>

        </div>
        <br>
        <br>
        <div style="width: 1200px;margin: 0 auto;text-align: center;border-bottom: 1px solid #EBEBEB">
            <p class="animated fadeInRight">有点甜有限公司品牌机构。专注旅游</p>
            <p class="animated fadeInRight">服务为核心服务。专注于创意服务实现商业价值更大化，为所有谋求长远发展的企业提升品牌品质。拥有经验丰富技术团队，专业的资深</p>
            <p class="animated fadeInRight">导游。凝聚了一批行业内优秀的年轻人，富有创造力和奉献精神。 我们所做的一切都是以客户的利益为出发点，帮助企业</p>
            <p class="animated fadeInRight">建立全面且切实的市场形象，我们坚信与企共同成长！</p>
            <br>
            <br>
            <br>
            <div v-if="tabshow" :class="{'animated fadeInRight ':tabshow}"
                 style="display:flex;justify-content: space-around">
                <img style="width: 300px;height: 194px;" src="../assets/img/about01.jpg" alt="">
                <img style="width: 300px;height: 194px;" src="../assets/img/about02.jpg" alt="">
                <img style="width: 300px;height: 194px;" src="../assets/img/about03.jpg" alt="">

            </div>
            <br>
            <br>
            <div v-if="tabshow02" :class="{'animated fadeInRight':tabshow02}" style="border-bottom: 1px solid #EBEBEB">
                <span  style="font-size: 30px">我们的团队</span> <span
                    style="margin-right: 20px;color: #A9A9A9;font-size: 18px">OUT</span> <span
                    style="margin-left: 0px;color:#4AB344;font-size: 18px">TEAM</span>
            </div>
            <br>
            <p v-if="tabshow02" :class="{'animated fadeInRight':tabshow02}">我们是追求品质与力求不断超越自己的团队，每一位成员也是亲密的伙伴，与公司一起成长与发展。我们尊重每次合作的机会与挑战，不断精进，</p>
            <p v-if="tabshow02" :class="{'animated fadeInRight':tabshow02}">力求完美。团队秉承专注、专业的服务思维，让客户通过交流的更大价值，并发掘无限的可能。热爱服务并坚信服务的力量让我们不断前进…</p>
            <br>
            <img v-if="tabshow02" :class="{'animated fadeInRight':tabshow02}" style="" src="../assets/img/about03.jpg" alt="">
        </div>
        <br>
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import IndexTop from "../components/top/IndexTop";
    import IndexHeader from "../components/top/IndexHeader";
    import Foot from "../components/bottom/Foot";

    export default {
        name: "About",
        components: {Foot, IndexHeader, IndexTop},
        watch: {
            scrollTopNum: function () {
                console.log(this.scrollTopNum)
                if (this.scrollTopNum > 222) {
                    this.tabshow = true;
                }
            },
            scrollTopNum02: function () {
                console.log(this.scrollTopNum)
                if (this.scrollTopNum > 147) {
                    this.tabshow02 = true;
                }
            },
        },
        data() {
            return {
                scrollTopNum: "",//页面滚动的高度
                tabshow: false,//是否进行某种操作
                scrollTopNum02: "",//页面滚动的高度
                tabshow02: false,//是否进行某种操作
            };
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true);
        },
        methods: {
            handleScroll() {
                let top =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop ||
                    window.pageYOffset;
                this.scrollTopNum = top;
                this.scrollTopNum02 = top;

            }
        },
    }
</script>

<style scoped>

</style>